<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组的空位</title>
</head>
<body>
    <h1>数组的空位</h1>

    <script>
        // 创建含空位的数组
        const arr1 = [1, , 3];
        console.log(arr1.length); // 3
        console.log(0 in arr1); // true
        console.log(1 in arr1); // false
        console.log(2 in arr1); // true

        // Array构造函数创建空位
        const arr2 = new Array(3);
        console.log(arr2.length); // 3
        console.log(0 in arr2); // false

        // 不同方法对空位的处理
        // forEach方法会跳过空位
        [1, , 3].forEach((x, i) => console.log(i + '. ' + x));
        // 0. 1
        // 2. 3

        // filter方法会跳过空位
        console.log([1, , 3].filter(x => true)); // [1, 3]

        // every方法会跳过空位
        console.log([1, , 3].every(x => x > 0)); // true

        // some方法会跳过空位
        console.log([1, , 3].some(x => x === undefined)); // false

        // map方法会保留空位
        console.log([1, , 3].map(x => x * 2)); // [2, empty, 6]

        // join和toString会将空位视为undefined
        console.log([1, , 3].join(',')); // "1,,3"
        console.log([1, , 3].toString()); // "1,,3"

        // ES6 fill会将空位视为正常位置
        const arr3 = new Array(3).fill('a');
        console.log(arr3); // ['a', 'a', 'a']

        // copyWithin会连空位一起拷贝
        const arr4 = [1, , 3].copyWithin(0, 1, 2);
        console.log(arr4); // [empty, empty, 3]

        // for...of循环会遍历空位
        for (const x of [1, , 3]) {
            console.log(x); // 1, undefined, 3
        }
    </script>
</body>
</html>  